<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/vue.js"></script>
    <script src="/js/axios.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.zhimg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.zhimg.com/element-ui/lib/index.js"></script>
    <script src="/js/auth.js"></script>
</head>
<body>
<div id="app">
    <el-row>
        <el-card class="box-card" >
            <el-row>
                <el-col>
                    <el-row :gutter="10">
                        <el-row>
                                <label>考试名称</label>
                                <el-input v-model="name" placeholder="请输入内容" clearable style="width: 150px" ></el-input>
                                <label>考试分类</label>
                                <template>
                                    <el-cascader
                                            v-model="examType"
                                            :options="typeOptions"
                                            :props="{ expandTrigger: 'hover' , value:'id' , label:'label'}"
                                            @change="handleChange">
                                    </el-cascader>
                                </template>
                                <label>考试类型</label>
                                <template>
                                    <el-select v-model="isResit" placeholder="请选择" style="width: 150px"   >
                                        <el-option
                                                v-for="item in isResitOptions"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value">
                                        </el-option>
                                    </el-select >
                                </template>
                            </el-row>
                        <el-row style="top: 10px">
                                <label>考试状态</label>
                                <template>
                                    <el-select v-model="status" placeholder="请选择" style="width: 150px"   >
                                        <el-option
                                                v-for="item in statusOptions"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value">
                                        </el-option>
                                    </el-select >
                                </template>
                                <template>
                                    <el-button type="primary" style="border-radius: 0px;position: relative;
                                    left: 30%;" @click="search" >搜索</el-button>
                                    <el-button type="primary" style="border-radius: 0px;position: relative;
                                    left: 30%;" @click="clear" >清空</el-button>
                                </template>
                            </el-row>
                    </el-row>
                </el-col>
            </el-row>
        </el-card>
    </el-row>


    <el-row>
        <el-card>
            <el-row>
                <el-col :lg="6">
                    <el-button type="primary" style="border-radius: 0px;" onclick="location='/ex/addexam.html'">添加考试</el-button>
                    <el-button type="primary" style="border-radius: 0px;">考试指派</el-button>
                </el-col>
            </el-row>
            <el-row style="top: 10px">
                <el-col :lg="18" >
                    <template>
                        <el-table :data="tableData" border style="width: 100%">
                            <el-table-column
                                    prop="id"
                                    label="考试编号"
                                    width="50">
                            </el-table-column>
                            <el-table-column
                                    prop="name"
                                    label="考试名称"
                                    width="100">
                            </el-table-column>
                            <el-table-column
                                    prop="examType.label"
                                    label="考试分类"
                                    width="100">
                            </el-table-column>
                            <el-table-column
                                    prop="isResit"
                                    label="考试类型"
                                    width="100">
                                <template slot-scope="scope">
                                    <span style="margin-left: 10px">{{ isResitMap[scope.row.isResit] }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    prop="timingLength"
                                    label="考试时长"
                                    width="100">
                            </el-table-column>
                            <el-table-column
                                    prop="paperStructure.questionTotalScore"
                                    label="总分"
                                    width="100">
                            </el-table-column>
                            <el-table-column
                                    label="及格分"
                                    width="100">
                                <template slot-scope="scope">
                                    <span style="margin-left: 10px">{{ scope.row.paperStructure.questionTotalScore * 0.6 }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    label="状态"
                                    width="100">
                                <template slot-scope="scope">
                                    <span style="margin-left: 10px">{{ statusMap[scope.row.status] }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    fixed="right"
                                    label="操作"
                                    width="150">
                                <template slot-scope="scope">
                                    <el-button @click="dialogFormVisible = true,handleClick(scope.row)" type="text" size="small">查看</el-button>
                                    <el-button
                                            @click.native.prevent="deleteRow(scope.$index, scope.row, tableData)"
                                            type="text"
                                            size="small">
                                        删除
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </template>
                </el-col>
                <el-col :span="10" :lg="10">
                    <div class="block" style="position: relative; left: 50%;">
                        <el-pagination
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :current-page="currentPage"
                                :page-sizes="[5, 10, 50, 100, 200]"
                                :page-size="pageSize"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="total">
                        </el-pagination>
                    </div>
                </el-col>
            </el-row>
        </el-card>
    </el-row>
    <el-dialog title="查看" :visible.sync="dialogFormVisible">
        <el-form :model="form">
            <el-form-item label="考试" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="开始时间" :label-width="formLabelWidth">
                <el-input v-model="form.beginTime" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="结束时间" :label-width="formLabelWidth">
                <el-input v-model="form.endTime" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="状态" :label-width="formLabelWidth">
                <el-select v-model="form.status" placeholder="请选择">
                    <el-option
                            v-for="item in formStatusOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogFormVisible = false,update()">修 改</el-button>
        </div>
    </el-dialog>
</div>

<script>
    let p = {headers}
    new Vue({
        el:"#app",
        data:{
            name:"",
            examType:'',
            typeOptions:[],
            isResit:'',
            isResitOptions:[{
                value: '0',
                label: '统一考试'
            }, {
                value: '1',
                label: '自由考试（补考）'
            }],
            status:'',
            statusOptions:[{
                value: 1,
                label: '已完成'
            }, {
                value: 2,
                label: '考试中'
            },{
                value: 3,
                label: '未开始'
            }],
            tableData:[],
            isResitMap:{
                '0':'统一考试',
                '1':'自由考试（补考）'
            },
            statusMap:{
                '1':"已完成",
                '2':"考试中",
                '3':"未开始"
            },
            currentPage:1,
            pageSize:10,
            total:0,
            dialogFormVisible: false,
            formLabelWidth: '120px',
            form:{
                id:"",
                name:"",
                beginTime:"",
                endTime:"",
                status:""
            },
            formStatusOptions:[{
                value: 1,
                label: '已完成'
            }, {
                value: 2,
                label: '考试中'
            },{
                value: 3,
                label: '未开始'
            }],

        },
        mounted(){
            axios.get("/exam/exam/allByPage",p).then(res=>{
                if(res.data.code==200){
                    this.tableData=res.data.data.list;
                    this.total=res.data.data.total;
                }
            })
            axios.get("/exam/examtype/menu",p).then(res=>{
                this.typeOptions = deleteChildren(res.data)
            })

        },
        methods:{
            search(){
                let param = {
                    "name":this.name,
                    "type":this.examType,
                    "isResit":this.isResit,
                    "status":this.status,
                    "pageNum":this.currentPage,
                    "pageSize":this.pageSize
                }
                axios.post("/exam/exam/caps",param,p).then(res=>{
                    if(res.data.code==200){
                        this.tableData=res.data.data.list;
                        this.total=res.data.data.total;
                    }
                })
            },
            clear(){
                this.name="",
                this.examType="",
                this.isResit="",
                this.status=""
            },
            handleChange(value) {
                this.examType=value[value.length-1];
            },
            handleClick(row) {
                this.form.id=row.id;
                this.form.name=row.name;
                this.form.beginTime=row.beginTime;
                this.form.endTime=row.endTime;
                this.form.status=row.status;
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.currentPage=1;
                this.pageSize=val;
                let param = {
                    "name":this.name,
                    "type":this.examType,
                    "isResit":this.isResit,
                    "status":this.status,
                    "pageNum":this.currentPage,
                    "pageSize":val
                }
                axios.post("/exam/exam/caps",param,p).then(res=>{
                    if(res.data.code==200){
                        this.tableData=res.data.data.list;
                        this.total=res.data.data.total;
                    }
                })
            },

            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.currentPage=val;
                let param = {
                    "name":this.name,
                    "type":this.examType,
                    "isResit":this.isResit,
                    "status":this.status,
                    "pageNum":val,
                    "pageSize":this.pageSize
                }
                axios.post("/exam/exam/caps",param,p).then(res=>{
                    if(res.data.code==200){
                        this.tableData=res.data.data.list;
                        this.total=res.data.data.total;
                    }
                })
            },
            update(){
                let update = JSON.parse(JSON.stringify(this.form));
                axios.post("/exam/exam/update",update,p).then(res=>{
                    if(res.data.code==200){
                        axios.get("/exam/exam/allByPage",p).then(res=>{
                            if(res.data.code==200){
                                this.tableData=res.data.data.list;
                                this.total=res.data.data.total;
                                this.currentPage=1;
                                this.pageSize=5;
                            }
                        })
                        alert("success");
                    }
                })
            },
            deleteRow(index,row,rows) {
                let param=new URLSearchParams();
                param.append("id",row.id);
                axios.post("/exam/exam/delete",param,p).then(res=>{
                    if(res.data.code==200){
                        axios.get("/exam/exam/allByPage",p).then(res=>{
                            if(res.data.code==200){
                                this.tableData=res.data.data.list;
                                this.total=res.data.data.total;
                            }
                        })
                        rows.splice(index, 1);
                        alert("success");
                    }
                })

            }
        }

    })

    function deleteChildren(obj) {
        for (let i in obj) {
            if(obj[i].children){
                if(obj[i].children.length){
                    deleteChildren(obj[i].children)
                }else {
                    delete obj[i].children;
                }
            }
        }
        return obj;
    }
</script>
</body>
</html>